<!--
 * @Author: cjx
 * @Date: 2023-04-18 17:43:34
 * @LastEditTime: 2023-04-19 14:11:21
 * @Description: 时间区间选择组件
 * @param {Array} keys 键名
 * @param {String} startDate 开始日期
 * @param {String} endDate 结束日期
 * @param {Function} @startDate 开始日期选择回调
 * @param {Function} @endDate 结束日期选择回调
 * @param {Boolean} startDateDisabled 禁用开始日期
 * @param {Boolean} endDateDisabled 禁用结束日期
 * @param {Boolean} allDisabled 禁用开始结束日期
-->

<template>
  <div class="dateBox">
    <Form-item class="dateBox__item" :prop="keys[0]">
      <CdDatePicker
        v-model="computedStartDate"
        type="date"
        datePos="start"
        :dateJudge="computedEndDate"
        :transfer="transfer"
        :disabled="startDateDisabled || allDisabled"
      />
    </Form-item>
    -
    <Form-item class="dateBox__item" :prop="keys[1]">
      <CdDatePicker
        v-model="computedEndDate"
        type="date"
        datePos="end"
        :dateJudge="computedStartDate"
        :transfer="transfer"
        :disabled="endDateDisabled || allDisabled"
      />
    </Form-item>
  </div>
</template>

<script lang="ts" setup>
import CdDatePicker from '@/components/basic/CdDatePicker/datePicker.vue'
import { computed } from '@vue/reactivity'
const props = defineProps({
  keys: {
    type: Array,
    required: true
  },
  startDate: {
    type: String,
    default: ''
  },
  endDate: {
    type: String,
    default: ''
  },
  transfer: {
    type: Boolean,
    default: true
  },
  startDateDisabled: {
    type: Boolean,
    default: false
  },
  endDateDisabled: {
    type: Boolean,
    default: false
  },
  allDisabled: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['startDate', 'endDate'])
const computedStartDate = computed({
  get: () => {
    return props.startDate || ''
  },
  set: (val) => {
    emits('startDate', val)
  }
})
const computedEndDate = computed({
  get: () => {
    return props.endDate || ''
  },
  set: (val) => {
    return emits('endDate', val)
  }
})
</script>

<style lang="less" scoped>
.dateBox {
  display: flex;
  &__item {
    flex: 1;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
}
.ivu-date-picker {
  width: 100%;
}
</style>
